<template>
  <div class="musicArea">
    <!-- title区域 -->
    <div class="titleDiv">
      <img class="coverImg" src="../assets/avator.jpg" />
      <h1 class="title">歌单-标题</h1>
      <!-- 用户头像 -->
      <div class="userInfo">
        <img class="userAvatar" src="../assets/avator.jpg" />
        <label class="userLabel">用户名称</label>
        <label class="userLabel">添加标签</label>
      </div>
      <div class="userDsc">歌单描述...</div>
      <!-- 四个按钮 -->
      <div class="btnsGroup">
        <div class="BtnsDivFocus">播放全部</div>
        <div class="BtnsDiv">下载</div>
        <div class="BtnsDiv">批量操作</div>
        <div class="BtnsDiv">分享</div>
      </div>
    </div>
    <!-- 歌曲列表 -->
    <playList></playList>
  </div>
</template>

<script>
import playList from './playList.vue'
export default {
  name: "musicArea",
  components:{
    playList
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
.musicArea {
  width: 100%;
  height: 570px;
  background-color: #fff;
  overflow: hidden;
}
/* titleDiv */
.titleDiv {
  height: 170px;
  margin: 30px 40px;
  background: #eee;
  position: relative;
  padding-left: 200px;
}
.titleDiv img.coverImg {
  display: block;
  width: 170px;
  height: 170px;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0;
}

.titleDiv h1.title {
  font-size: 26px;
  font-weight: bold;
}

.titleDiv img.userAvatar {
  width: 25px;
  height: 25px;
  border-radius: 100%;
}

.titleDiv .userInfo {
  height: 25px;
  line-height: 25px;
  margin: 15px 0;
}
.titleDiv .userInfo label.userLabel {
  margin-left: 15px;
}

.titleDiv .userDsc {
  font-size: 15px;
}
div.btnsGroup {
  position: absolute;
  bottom: 10px;
  right: 31px;
}
/* 通用按钮组件 */
div.BtnsDiv {
  float: left;
  width: 110px;
  height: 30px;
  background: #ddd;
  margin: 0 15px 0 0;
  text-align: center;
  line-height: 30px;
  border-radius: 20px;
}
div.BtnsDiv:hover {
  cursor: pointer;
  background-color: #d2d0d0;
}
div.BtnsDivFocus {
  cursor: pointer;
  float: left;
  width: 110px;
  height: 30px;
  background: #1ed0a1;
  margin: 0 15px 0 0;
  text-align: center;
  line-height: 30px;
  border-radius: 20px;
  color: #fff;
}
div.BtnsDivFocus:hover{
  cursor: pointer;
  background: #1eca9c;
}
</style>
